<template>
  <section class="bg-gray-fa lg:pt-20 pt-9 pb-8 lg:pb-12">
    <div class="container mx-auto">
      <div class="lg:text-3xl text-xl text-gray-33 font-bold text-center">
        核心解决方案
      </div>
      <ul
        class="
          lg:mt-16
          mt-4
          mx-[10px]
          lg:mx-0
          grid
          lg:grid-cols-2
          grid-cols-1
          lg:gap-8
          gap-3
        "
      >
        <li
          v-for="item in list"
          :key="item.title"
          class="group bg-white hover:shadow rounded flex items-center"
        >
          <div
            class="
              lg:w-[120px] lg:h-[120px]
              w-[88px]
              h-[88px]
              bg-white
              group-hover:bg-red group-hover:-translate-y-6
              duration-500
              flex
              items-center
              justify-center
            "
          >
            <img :src="item.icon" class="ai-icon w-16 h-16" alt="" />
          </div>
          <div class="lg:ml-4 pr-4">
            <div
              class="lg:mt-2 text-[#202020] lg:text-xl text-base font-semibold"
            >
              {{ item.title }}
            </div>
            <div
              class="text-[#747F92] lg:text-sm text-xs lg:leading-7 leading-5"
            >
              {{ item.text }}
            </div>
          </div>
        </li>
      </ul>
      <info-btn class="lg:flex hidden" @click.native="$store.commit('SQ')"
        >免费获取方案</info-btn
      >
    </div>
  </section>
</template>

<script>
import icon1 from "@/assets/img/kid-icon1.png";
import icon2 from "@/assets/img/kid-icon2.png";
import icon3 from "@/assets/img/kid-icon3.png";
import icon4 from "@/assets/img/kid-icon4.png";
export default {
  data() {
    return {
      list: [
        {
          icon: icon1,
          title: "招生运营",
          text: "私域流量培育转化，整合线上线下招生营销。",
        },
        {
          icon: icon2,
          title: "平安校园",
          text: "通过安全巡检和智能监控，将所有风险控制在可接受范围。",
        },
        {
          icon: icon3,
          title: "家园共育",
          text: "通过生活故事+教育目标+家庭建议打造家园共育标准流程。",
        },
        {
          icon: icon4,
          title: "智慧考勤",
          text: "全流程、自动化的无感考勤管理平台，实时掌握出勤数据。",
        },
      ],
    };
  },
};
</script>

<style scoped>
/deep/ .group:nth-child(1):hover .ai-icon {
  content: url("@/assets/img/kid-icon1-w.png");
}

/deep/ .group:nth-child(2):hover .ai-icon {
  content: url("@/assets/img/kid-icon2-w.png");
}

/deep/ .group:nth-child(3):hover .ai-icon {
  content: url("@/assets/img/kid-icon3-w.png");
}

/deep/ .group:nth-child(4):hover .ai-icon {
  content: url("@/assets/img/kid-icon4-w.png");
}
</style>